<template>
  <div class="main">
    <div class="title">
      <div class="titleBlock"></div>
      <div class="titleText">预约详情</div>
    </div>
    <div class="card1">
      <div class="card1Title">患者信息</div>
      <div class="card1Section">
        <div class="form1">
          <el-form :model="form" label-width="120px">
            <el-form-item label="患者姓名">
              <el-input v-model="form.Con_name" disabled />
            </el-form-item>
            <el-form-item label="证件类型">
              <el-input v-model="form.Zj_type" disabled />
            </el-form-item>
            <el-form-item label="微信昵称">
              <el-input v-model="form.nickname" disabled />
            </el-form-item>
            <el-form-item label="就诊人地址">
              <el-input v-model="form.Con_address" disabled />
            </el-form-item>
          </el-form>
        </div>
        <div class="form1">
          <el-form :model="form" label-width="120px">
            <el-form-item label="就诊卡号">
              <el-input v-model="form.Con_num" disabled />
            </el-form-item>
            <el-form-item label="证件号码">
              <el-input v-model="form.Zj_num" disabled />
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input v-model="form.Con_phone" disabled />
            </el-form-item>
          </el-form>
        </div>
        <div class="form1">
          <el-form :model="form" label-width="120px">
            <el-form-item label="患者头像">
              <el-image
                style="width: 100px; height: 100px"
                class="form1_img"
                :src="form.Con_img"
                :fit="fit"
              />
            </el-form-item>
            <el-form-item label="关系">
              <el-input v-model="form.Con_guanxi" disabled />
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <div class="card1">
      <div class="card1Title">就诊信息</div>
      <div class="card1Section">
        <div class="form1">
          <el-form :model="form" label-width="120px">
            <el-form-item label="就诊医院">
              <el-input v-model="form.Con_hos" disabled />
            </el-form-item>
            <el-form-item label="就诊医生">
              <el-input v-model="form.Con_yisheng" disabled />
            </el-form-item>
            <el-form-item label="费用类型">
              <!-- <el-input v-model="form.OutpatientServiceTime" disabled /> -->
            </el-form-item>
          </el-form>
        </div>
        <div class="form1">
          <el-form :model="form" label-width="120px">
            <el-form-item label="医院地址">
              <el-input v-model="form.Con_hosAdd" disabled />
            </el-form-item>
            <el-form-item label="医生职称">
              <el-input v-model="form.Ys_zhicheng" disabled />
            </el-form-item>
          </el-form>
        </div>
        <div class="form1">
          <el-form :model="form" label-width="120px">
            <el-form-item label="就诊科室">
              <el-input v-model="form.Con_keshi" disabled />
            </el-form-item>
            <el-form-item label="业务类型">
              <el-input v-model="form.Yw_type" disabled />
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="tab">
        <el-table
          :data="tableData"
          stripe
          style="width: 60%"
          :header-cell-style="{ background: '#f2f2f2' }"
        >
          <el-table-column prop="date" label="序号" />
          <el-table-column prop="type" label="项目类别" />
          <el-table-column prop="name" label="项目名称" />
          <el-table-column prop="oneprice" label="单价" />
          <el-table-column prop="number" label="数量" />
          <el-table-column prop="price" label="小计（元）" />
        </el-table>
      </div>
    </div>

    <div class="card1">
      <div class="card1Title">订单信息</div>
      <div class="card1Section">
        <div class="form1">
          <el-form :model="form" label-width="120px">
            <el-form-item label="订单总额">
              <el-input v-model="form.Dd_all" disabled />
            </el-form-item>
            <el-form-item label="订单状态">
              <el-input v-model="form.Dd_type" disabled />
            </el-form-item>
            <el-form-item label="订单备注">
              <el-input
                v-model="form.Dd_bz"
                disabled
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-form>
        </div>
        <div class="form1">
          <el-form :model="form" label-width="120px">
            <el-form-item label="支付方式">
              <el-input v-model="form.Zf_type" disabled />
            </el-form-item>
            <el-form-item label="订单编号">
              <el-input v-model="form.Dd_num" disabled />
            </el-form-item>
          </el-form>
        </div>
        <div class="form1">
          <el-form :model="form" label-width="120px">
            <el-form-item label="卡内余额">
              <el-input v-model="form.Zf_yue" disabled />
            </el-form-item>
            <el-form-item label="取消时间">
              <el-input v-model="form.Qx_time" disabled />
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="anNiu">
        <el-button type="primary">保存</el-button>
        <el-button>取消</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { ref, reactive, toRefs, computed, watch } from "vue";
import { useRoute, useRouter } from "vue-router";

import storege from "../../utils/storege";
export default {
  props: {},
  setup() {
    const route = useRoute();
    const data = reactive({
      form: {},
      tableData: [
        {
          date: 1,
          type: "西药费",
          name: "普罗布考片",
          oneprice: 40,
          number: 2,
          price: 100.0,
        },
        {
          date: 2,
          type: "西药费",
          name: "阿司匹林肠溶片",
          oneprice: 40,
          number: 2,
          price: 80.0,
        },
        {
          date: 1,
          type: "西药费",
          name: "安眠药",
          oneprice: 10,
          number: 6,
          price: 150.0,
        },
        {
          date: 1,
          type: "西药费",
          name: "养罗多",
          oneprice: 80,
          number: 2,
          price: 160.0,
        },
      ],
    });
    let host = "http://localhost:3000/upload/";
    let datas = storege.getStorage("Alldata");

    data.form = datas.data.data[0];
    console.log(data.form, 123);
    data.form.Con_img = host + data.form.Con_img;
    const id = route.params.id;
    return { ...toRefs(data), id, host };
  },
};
</script>
<style lang="scss" scoped>
.title {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 0 30px;
  box-sizing: border-box;
  .titleBlock {
    width: 50px;
    height: 13px;
    background-color: #006eff;
    border-radius: 20px;
  }
  .titleText {
    font-size: 30px;
    margin-left: 20px;
  }
}
.card1 {
  box-shadow: 1px 1px 5px 1px rgba(194, 188, 188, 0.486);
  width: 100%;
  margin-bottom: 30px;
  .card1Title {
    padding: 20px;
    box-sizing: border-box;
    color: #006eff;
    background-color: #f2f2f2;
  }
  .card1Section {
    width: 100%;
    background-color: white;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding-top: 40px;
    box-sizing: border-box;
    .form1 {
      width: 30%;
      // .el-input__wrapper {
      //   box-shadow: 0 0 0 0 gray;
      // }
      .btn {
        background-color: #006eff;
        color: white;
      }
    }
  }
  .anNiu {
    padding: 30px 80px 50px;
    box-sizing: border-box;
    background-color: white;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    .el-button {
      padding: 10px 15px;
      box-sizing: border-box;
      font-size: 20px;
    }
  }
}
.tab {
  width: 100%;
  background-color: white;
  position: relative;
  padding-left: 65px;
  padding-bottom: 40px;
}
.form1_img {
  border-radius: 50px;
}
</style>